<template>
	<div class="business-container">
		<div class="box_title">企业分布情况</div>
		<div class="cmpNum">
			<div class="cmpNum_left">企业总量</div>
			<div class="cmpNum_right">
				<div class="wlt_cr_num1">0</div>
				<div class="wlt_cr_num2">0</div>
				<div class="wlt_cr_num3">6</div>
				<div class="wlt_cr_num4">2</div>
				<div class="wlt_cr_num5">2</div>
			</div>
		</div>
		<div class="wlt_quota">
			<div class="wlt_quota_left">
				<div class="wlt_ql_top">总用地面积</div>
				<div class="wlt_ql_bottom"><span>9202505</span>&nbsp;亩</div>
			</div>
			<div class="wlt_quota_right">
				<div class="wlt_qr_top">物业利用总面积</div>
				<div class="wlt_qr_bottom"><span>2549662</span>&nbsp;平方米</div>
			</div>
		</div>
		<div class="chart" id="chart_left1"></div>

	</div>
</template>

<script>
	export default {
		name: "business",
		data() {
			return {
				option: null,
				myChart: null,
				num: 0,
				timer: null,
				title: ''
			}
		},
		mounted() {
			this.getEchartLeft1();
		},
		methods: {
			getEchartLeft1() {
				let seriesData = [{
					name: "镇属",
					value: "534069",
					itemStyle: {
						color: '#8AE296'
					}
				}, {
					name: "集体",
					value: "2274296",
					itemStyle: {
						color: '#16C5FA'
					}
				}, {
					name: "私有",
					value: "6394140",
					itemStyle: {
						color: '#D6E05D'
					}
				}];
				let legendData1 = ["镇属"]
				let legendData2 = ["集体"]
				let legendData3 = ["私有", ]

				// 实例化对象
				this.option = {
					tooltip: {
						trigger: 'item',
						borderWidth: 1,
						padding: 5,
					},
					legend: [{
							type: "scroll",
							orient: 'vertical',
							icon: 'square',
							left: '12%',
							align: 'left',
							top: '400', //高度
							itemGap: 20,
							// bottom:'50%',
							textStyle: {
								fontSize: 14,
								color: '#AAAAAA'
							},
							data: legendData1,
						}, {
							type: "scroll",
							orient: 'vertical',
							icon: 'square',
							left: '40%',
							align: 'left',
							top: '400',
							itemGap: 20,
							// bottom:'50%',
							textStyle: {
								fontSize: 14,
								color: '#AAAAAA'
							},
							data: legendData2
						},
						{
							type: "scroll",
							orient: 'vertical',
							icon: 'square',
							left: '68%',
							align: 'left',
							top: '400',
							itemGap: 20,
							// bottom:'50%',
							textStyle: {
								fontSize: 14,
								color: '#AAAAAA'
							},
							data: legendData3
						},
					],

					series: [{
						type: 'pie',
						z: 3,
						top: '-80', //高度
						radius: ['0%', '65'],
						clockwise: true,
						avoidLabelOverlap: true,
						hoverOffset: 5,
						label: {
							show: true,
							position: 'outside',
							formatter: '{a|{b}：{d}%}\n{hr|}',
							rich: {
								a: {
									color: '#fff',
								}
							}
						},
						labelLine: {
							normal: {
								length2: 20,
								lineStyle: {
									width: 1
								}
							}
						},
						data: seriesData
					}]
				};
				//初始化echarts实例
				this.myChart = echarts.init(document.getElementById('chart_left1'));
				//使用制定的配置项和数据显示图表
				this.myChart.setOption(this.option);
				//开启定时器
				this.setTimeToDo();
				this.setHighLight();
				const data = this.option.series[0].data;
				let debounce = null;
				this.myChart.on('mouseover', params => {
					clearInterval(this.timer);
					// 鼠标快速移动时，会导致mouseover里的代码来不及执行，引起事件延迟，出现多个扇形区域同时被选中的现象，所以有必要设置防抖函数
					debounce && clearTimeout(debounce);
					debounce = setTimeout(() => {
						const data = this.option.series[0].data;
						data.forEach(e => e.selected = false);
						data[params.dataIndex].selected = true;
						this.myChart.setOption(this.option);
						this.num = params.dataIndex;
						this.title = params.name;
					}, 300);
				})
				this.myChart.on('mouseout', params => {
					this.setTimeToDo();
					this.setHighLight();
				})
				// 当切屏时，定时器容易执行异常，所以如果用户切屏，就暂停定时器
				window.onblur = () => {
					clearInterval(this.timer);
				}
				window.onfocus = () => {
					this.setHighLight();
				}
			},
			setTimeToDo() {
				const data = this.option.series[0].data;
				data.forEach(e => e.selected = false);
				data[this.num].selected = true;
				this.title = data[this.num].name;
				// 必须重新设置option，因为echart没有监听data的变化
				this.myChart.setOption(this.option);
			},
			setHighLight() {
				clearInterval(this.timer);
				const data = this.option.series[0].data;
				this.timer = setInterval(() => {
					if (this.num < data.length - 1) {
						this.num++
					} else {
						this.num = 0
					}
					this.setTimeToDo();
				}, 1500);
			}



		},
		beforeDestroy() {

		}
	};
</script>

<style lang="scss" scoped>
	@import url("../../assets/styles/emo/emo.css");
	.business-container {
		.chart {
			height: 8.33rem;
		}
	}


</style>
